<template>
    <HomePage :side-menu-default-openeds="sideMenuDefaultOpeneds" :side-menu-default-active="sideMenuDefaultActive">
        <div slot="breadcrumbmodule">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="padding:20px;">
                <el-breadcrumb-item :to="{ path: '/redis/param' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>交易发送参数表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div slot="corechildmodule" id="defaultCorechildModule">
            <div id="formModule">
                <el-form label-width="80px">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="系统名称">
                                <el-select v-model="selectedSystem" placeholder="清选择系统名称"
                                           @change="preLoadTradeCodeList">
                                    <el-option v-for="item in systemList" :key="item.id"
                                               :label="item.systemAbbr + '-' + item.systemName"
                                               :value="item.systemIndex"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="16">
                            <el-button type="primary" icon="el-icon-search" @click="doSearch">查询</el-button>
                            <el-button plain @click="doReset">重置</el-button>
                            <el-button type="success" style="float:right;">添加</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="tableAreaWithTitleModule">
                    <el-table :data="tableData" style="width: 100%" stripe border>
                        <el-table-column prop="systemAbbr" label="系统名称" width="180"></el-table-column>
                        <el-table-column prop="tradeCodeIndex" label="交易码" width="180"></el-table-column>
                        <el-table-column prop="tradeCodeName" label="交易名" width="180"></el-table-column>
                        <el-table-column prop="tradeUrl" label="TRADE_URL" width="180"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="140">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" >修改</el-button>
                                <el-button type="text" icon="el-icon-delete" style="color:#F56C6C">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </HomePage>
</template>

<script>

    //引入主模块
    import HomePage from '@/views/homepage/HomePage'

    export default {
        name: "RedisTradeCodeParam",
        components: {HomePage},
        created() {
            var self = this;
            //加载系统名称的Select框
            self.$api.get('commonController/getSystemList', null, result => {
                self.systemList = result;
            }, error => {
                //如果后续需要对错误进行处理，写在这里就可以了
            });
        },
        data() {
            return {
                sideMenuDefaultOpeneds: ['2'],
                sideMenuDefaultActive: "/redis/flow/tradeCodeParam",
                systemList: [],//系统select框的值
                selectedSystem: '',//选中的system
                tableData: [
                ]
            }
        },
        methods: {
            //预加载tradeCodeList
            preLoadTradeCodeList() {
                var self = this;
                var systemIndex = self.selectedSystem;
                var data = new Object();
                data.systemIndex = systemIndex;
                self.$api.get('commonController/getTradeCodeList', data, result => {
                    self.tradeCodeList = result;
                }, error => {
                    //如果后续需要对错误进行处理，写在这里就可以了
                });
            },
            //查询
            doSearch() {
                var self = this;
                var systemIndex = self.selectedSystem;
                var tradeCodeIndex = self.selectedTradeCode;
                var data = new Object();
                data.systemIndex = systemIndex;
                self.$api.get('commonController/getTradeCodeInfoList', data, result => {
                    self.tableData = result;
                }, error => {
                    //如果后续需要对错误进行处理，写在这里就可以了
                });
            },
            doReset(){
                var self = this;
                self.selectedSystem = '';
                self.tableData = [];
            }
        }
    }
</script>

<style type="text/css">

    #defaultCorechildModule {
        width: 100%;
        height: 800px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        float: right;
    }

    #formModule {
        padding: 20px;
    }

    .tableAreaWithTitleModule {
        width: 100%;
        height: 400px;
    }


</style>
